<template>
  <!--金铲铲自动获取授权 -->
  <el-dialog
    :title="'扫码授权'"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="300px"
    append-to-body
    @close="close"
  >
    <div class="form-box">
      <div class="demo-ruleForm">
        <img :src="qrCode" alt="" style="width: 200px; height: 200px" />
        <div class="center">
          {{ msg || "请扫码授权" }}
        </div>
        <div><el-button @click="getGameInfos">我已授权</el-button></div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import autoApi from "@/api/autoProduction/information.js"
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      msg: '',
      qrCode: '',
      uuid: '',
      timer: null,
      params: {},
      tencentId: ''
    };
  },
  created() {

  },
  beforeDestroy() {
    // window.clearInterval(this.timer)
  },
  methods: {
    // 打开弹窗
    open(data) {
      this.dialogVisible = true
      this.getQrCode()
    },
    close() {
      window.clearInterval(this.timer)
    },
    getQrCode() {
      autoApi.getJCCQRcode().then(res => {
        //console.log("%c Line:52 🍻 res", "color:#ffdd4d", res);
        if (res.code == 200) {
          this.qrCode = res.data.base64Img
          this.params.uuid = res.data.uuid
          // this.getTokenInterval()
        }
      })
    },

    getGameInfos() {
      this.loading = true
      let obj = {
        uuid: this.params.uuid
      }
      autoApi.getJccData(obj).then(res => {
        this.loading = false
        this.msg = res.msg
        if (res.msg == '操作成功') {
          let resData = {
            ...res.data
          }
          this.$emit('success', resData)
          this.dialogVisible = false
        }
      }).catch(err => {
        this.loading = false
        if (err.code == 500) {
          this.getQrCode()
        }
      })
    },

    getTokenInterval() {
      window.clearInterval(this.timer)
      this.timer = window.setInterval(() => {
        this.getToken()
      }, 5000)
    }

  }
};
</script>
<style scoped lang="css">
.demo-ruleForm {
  text-align: center;
}
</style>
